<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sitemesh" uri="http://www.opensymphony.com/sitemesh/decorator" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%--<script type="text/javascript" src="${ctx}/static/lib/jquery.ztree-3.5/js/jquery.ztree.all-3.5.min.js"></script>--%>
<%--<link rel="stylesheet" type="text/css" href="${ctx}/static/jquery/jquery-extensions/css/zTreeStyle/zTreeStyle.css"/>--%>
<style>
    div.menuwrap {height:462px;}
    div.menuwrap div.left{float: left;width: 20%;}
    div.menuwrap div.right{float: right;width: 78%;}
    div.menuBackground {height:462px;text-align:left;}
    ul.ztree {border: 0px solid #617775;}
</style>
<script type="text/javascript">
var dTable;
var setting = {
    data: {
        key: {
            title: "t"
        }
    },
    view: {
        selectedMulti: false
    },
    async: {
        enable: true,
        url:"${ctx}/system/permission/getPermissionTree",
        autoParam:["id"],
        type : "get",
        contentType: "application/json",
        dataFilter: filter
    },
    callback: {
        onClick: onClick,
        onAsyncError: onAsyncError
    }
};

function filter(treeId, parentNode, childNodes) {
    if (!childNodes) return null;
    for (var i=0, l=childNodes.length; i<l; i++) {
        childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
    }
    return childNodes;
}

function onClick(event, treeId, treeNode, clickFlag) {
    getPermissions(treeNode.id);
}

function onAsyncError() {
    $( "#dialogMessage" ).text("无法获取请求，服务器发生异常或者处于关闭状态！请联系管理员！");
    $( "#dialog-message" ).dialog("open");
}

function getPermissions(pId) {
    $("#parentPermissionId").val(pId);
    $.ajax({
        url:"${ctx}/system/permission/getChildPermission",
        data:{"parentPermissionId" : pId, "random" : new Date().getTime()},
        dataType:"json",
        success:function(data){
            dTable.fnClearTable();
            dTable.fnAddData(data);
            dTable.fnDraw();
        },
        error:function(jqXHR, textStatus, errorThrown){
            onAsyncError();
        }
    });
}

$(function () {
    $("#tabs").tabs();
    $.fn.zTree.init($("#tree"), setting);
    dataTableSettings.bFilter = false;
    dTable = $('#permissionTbl').dataTable(dataTableSettings);
    getPermissions(null);

    $( "#delete-dialog-form" ).dialog({
        autoOpen: false,
        width: 400,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        modal: true,
        buttons: {
            "确定": function () {
                $(this).dialog("close");
                $.ajax({
                    url:"${ctx}/system/permission/delete",
                    data:{"permissionId" : $( "#permissionId").val(), "random" : new Date().getTime()},
                    dataType:"json",
                    success:function(data){
                        getPermissions($( "#parentPermissionId" ).val());
                        refreshNode();
                    },
                    error:function(jqXHR, textStatus, errorThrown){
                        onAsyncError();
                    }
                });
            },
            "关闭": function () {
                $(this).dialog("close");
            }
        }
    });

    $( "#permission-dialog-form" ).dialog({
        autoOpen: false,
        width: 400,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
        modal: true,
        buttons: {
            "保存": function () {
                if($( "#pPermissionName" ).val() == '') {
                    $( ".validations" ).text("请输入权限代码");
                    $( "#pPermissionName" ).focus();
                    return false;
                }

                if($( "#pPermissionDesc" ).val() == '') {
                    $( ".validations" ).text("请输入权限描述");
                    $( "#pPermissionDesc" ).focus();
                    return false;
                }

                $(this).dialog("close");

                $.ajax({
                    url:"${ctx}/system/permission/save",
                    data:{"pPermissionId" : $( "#pPermissionId").val(),
                        "pParentPermissionId" : $( "#pParentPermissionId").val(),
                        "pPermissionName" : $( "#pPermissionName").val(),
                        "pPermissionDesc" : $( "#pPermissionDesc").val(),
                        "random" : new Date().getTime()},
                    dataType:"json",
                    type: "post",
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    success:function(data){
                        getPermissions($( "#parentPermissionId" ).val());
                        refreshNode();
                    },
                    error:function(jqXHR, textStatus, errorThrown){
                        onAsyncError();
                    }
                })
            },
            "关闭": function () {
                $(this).dialog("close");
            }
        }
    });
});

function editPermission(id) {
    $( ".validations" ).text("");
    $.ajax({
        url:"${ctx}/system/permission/" + id,
        data:{"random" : new Date().getTime()},
        dataType:"json",
        success:function(data){
            $( "#pPermissionId").val(data.id);
            $( "#pParentPermissionId").val(data.pId);
            $( "#pPermissionName").val(data.name);
            $( "#pPermissionDesc").val(data.t);
            $( "#permission-dialog-form" ).dialog("open");
        },
        error:function(jqXHR, textStatus, errorThrown){
            onAsyncError();
        }
    })
}

function addPermission() {
    $( ".validations" ).text("");
    $( "#pPermissionId").val("");
    $( "#pParentPermissionId").val($("#parentPermissionId").val());
    $( "#pPermissionName").val("");
    $( "#pPermissionDesc").val("");
    $( "#permission-dialog-form" ).dialog("open");
}

function deletePermission(id) {
    $( "#permissionId").val(id);
    $( "#delete-dialog-form" ).dialog("open");
}

function refreshNode() {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    nodes = zTree.getSelectedNodes();
    if(nodes.length == 0) {
        zTree.destroy();
        $.fn.zTree.init($("#tree"), setting);
    } else {
        for (var i=0, l=nodes.length; i<l; i++) {
            zTree.reAsyncChildNodes(nodes[i], "refresh", true);
        }
    }
}

function rebuildTree() {
    var zTree = $.fn.zTree.getZTreeObj("tree");
    zTree.destroy();
    $.fn.zTree.init($("#tree"), setting);
}
</script>
<div id="tabs">
    <ul>
        <li id="t1"><a href="#tabs-1">权限管理</a></li>
    </ul>
    <div id="tabs-1">
        <div class="content-box-content">
            <div id="tab2">
                <div class="bg"></div>
                <form action="" method="POST" id="permissionForm">
                    <div class="menuwrap">
                        <div class="menuBackground left">
                            <p class="ui-state-highlight"><input type="button" value="刷新权限树" onclick="rebuildTree()"></p>
                            <ul id="tree" class="ztree"></ul>
                        </div>
                        <div class="right">
                            <input type="hidden" name="parentPermissionId" id="parentPermissionId" value="0"/>
                            <input type="hidden" name="permissionId" id="permissionId"/>
                            <div id="main-content" class="tablewrapper">
                            <table cellpadding="0" cellspacing="0" border="0" class="display" id="permissionTbl">
                                <thead>
                                <tr>
                                    <td>权限代码</td>
                                    <td>权限描述</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                            </table>
                            </div>
                            <br /><br />
                            <p><input type="button" value="新增权限" onclick="addPermission()"></p>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="clr"></div>
    </div>
    <div class="clr"></div>
    <div id="permission-dialog-form" title="权限信息" style="display: none;">
        <form action="" id="permissionEditForm" method="post">
            <p class="validations"></p>
            <input type="hidden" name="pPermissionId" id="pPermissionId"/>
            <input type="hidden" name="pParentPermissionId" id="pParentPermissionId"/>
            <table class="searchtable">
                <tbody>
                <tr>
                    <td class="bg_gray">权限代码(<font color="red">*</font>)</td>
                    <td>
                        <input type="text" name="pPermissionName" id="pPermissionName" maxlength="100" class="text_medium"/>
                    </td>
                </tr>

                <tr>
                    <td class="bg_gray">权限描述(<font color="red">*</font>)</td>
                    <td>
                        <input type="text" name="pPermissionDesc" id="pPermissionDesc" maxlength="50" class="text_medium"/>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    <div id="delete-dialog-form" title="确定" style="display: none;">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
            <span id="dialog-confirm-msg">请谨慎操作，确定要删除此权限吗？删除此权限可能会导致某些角色的授权失效，并同时将其所有子权限一起删除。</span>
        </p>
    </div>
</div>
</div>